<template>
  <div style="margin-top: 20px">
    <el-form :model="where" label-width="auto" @keyup.enter.native="reload" @submit.native.prevent>
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="所属区域" prop="zone_name">
            <el-select v-model="where.zone_name" class="ele-block" clearable placeholder="请选择所属区域">
              <el-option v-for="item in zones" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :lg="6" :md="12">-->
        <!--          <el-form-item label="入场时间" prop="date">-->
        <!--            <el-date-picker style="width: 100%"-->
        <!--                            v-model="where.date"-->
        <!--                            value-format="yyyy-MM-dd"-->
        <!--                            type="daterange"-->
        <!--                            range-separator="至"-->
        <!--                            start-placeholder="开始日期"-->
        <!--                            end-placeholder="结束日期">-->
        <!--            </el-date-picker>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :lg="6" :md="12">
          <el-form-item label-width="0">
            <el-button type="primary" @click="reload">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection" :where="where"
                   :parseData="parseData"
                   height="calc(100vh - 375px)">
      <template #users="scope">
        {{ scope.row.users.map(item => item.realname).join(",") }}
      </template>

      <template #expand="expand">
        {{ expand.row.username }}
      </template>
    </ele-pro-table>
  </div>
</template>

<script>

export default {
  name: "Summary",
  data() {
    return {
      url: '/projects/over_view',
      columns: [
        {
          type: 'index',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'name',
          label: '项目名称',
          width: 250,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'order_number',
          label: '订单号',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'product_quantity',
          label: '数量（台）',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'user_name',
          label: '现场负责人',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center'
        },
        {
          slot: 'users',
          label: '协助人员',
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'entry_at',
          label: '入场时间',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center'
        },
        {
          prop: '%E7%8E%B0%E5%9C%BA%E5%8B%98%E5%AF%9F',
          label: '现场勘查',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center'
        },
        {
          prop: '%E8%AE%BE%E5%A4%87%E8%BF%9B%E5%9C%BA',
          label: '设备进场',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: '%E8%AE%BE%E5%A4%87%E6%8B%BC%E8%A3%85',
          label: '设备拼装',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center'
        },
        {
          prop: '%E5%86%85%E9%83%A8%E8%BF%9E%E6%8E%A5',
          label: '内部连接',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        }, {
          prop: '%E7%94%B5%E6%B0%94%E6%8E%A5%E7%BA%BF',
          label: '电气接线',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: '%E9%80%9A%E9%A3%8E%E8%B0%83%E8%AF%95',
          label: '通风调试',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        }, {
          prop: '%E7%8E%AF%E5%A2%83%E8%B0%83%E8%AF%95',
          label: '环境调试',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: '%E5%88%9D%E6%AC%A1%E9%AA%8C%E6%94%B6',
          label: '初次验收',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: '%E9%97%AE%E9%A2%98%E6%95%B4%E6%94%B9',
          label: '问题整改',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: '%E6%9C%80%E7%BB%88%E9%AA%8C%E6%94%B6',
          label: '最终验收',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
      ],
      selection: [],
      zones: [],
      where: {}
    }
  },
  created() {
    this.getParams()
  },
  methods: {
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    reset() {
      this.where = {}
      this.reload()
    },
    getParams() {
      this.$http.get(`/projects/params`,).then((res) => {
        if (res.data.code === 0) {
          this.zones = res.data.data.zones
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    parseData(data) {
      data.data.forEach(item => {
        item.task_types.forEach((val, i) => {
          console.log(val,encodeURI(val))
          item[encodeURI(val)] = item.task_type_counts[i]
        })
      })
      console.log(data, 222)
      return data
    }
  }
}
</script>

<style scoped>

</style>
